<!--
//
// ElSelectBool.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/14.
//
-->
<template>
    <el-select v-model="tempValue" style="width: 200px">
        <el-option v-for="item in numberList" :key="item.value" :value="item.value" :label="item.name"/>
    </el-select>
</template>

<script>
export default {
    name: "ElSelectBool",
    emits: ["update:modelValue"],
    props: {
        modelValue: {
            type: [Boolean, null],
            default: () => null
        },
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            tempValue: null
        }
    },
    computed: {
        numberList() {
            const list = this.list;
            return list.map(item => {
                item.value = item.value ? 1 : 0;
                return item;
            })
        }
    },
    watch: {
        modelValue() {
            this.setTempValue()
        },
        tempValue(val) {
            if (val === null) return this.$emit("update:modelValue", null)
            this.$emit("update:modelValue", val === 1)
        }
    },
    mounted() {
        this.setTempValue()
    },
    methods: {
        setTempValue() {
            if (this.modelValue === null) return this.tempValue = null;
            this.tempValue = this.modelValue ? 1 : 0
        }
    }
}
</script>

<style scoped>
.ElSelectBool {
}
</style>
